<%--
  Created by IntelliJ IDEA.
  User: 赵懒洋
  Date: 2020/7/21
  Time: 20:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="iframe-h">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网站后台管理模版</title>
    <link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css" />
</head>

<body>
<div class="wrap-container clearfix">
    <div class="column-content-detail">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline tool-btn">
                    <button class="layui-btn layui-btn-small layui-btn-danger  delete_all"><i class="layui-icon">&#xe640;</i></button>
                </div>
                <div class="layui-inline">
                    <input type="text" id="userName" name="userName"  placeholder="请输入用户名" class="layui-input">
                </div>
                <div class="layui-inline">
                    <select id="states" name="states" lay-filter="status" class="select_state">
                        <option value=" ">请选择一个状态</option>
                        <option value="1">已启用</option>
                        <option value="0">已停用</option>
                    </select>
                </div>
                <button type="button" id="start_seach" class="layui-btn layui-btn-normal" >搜索</button>
                <button type="button" id="clean_seach" class="layui-btn layui-btn-normal" >清除搜索</button>
            </div>
        </form>
        <div class="" id="table-list">
            <table class="layui-table" lay-even lay-skin="nob">
                <colgroup>
                    <col width="50">
                    <col class="hidden-xs" width="50">
                    <col class="hidden-xs" width="100">
                    <col>
                    <col class="hidden-xs" width="150">
                    <col class="hidden-xs" width="150">
                    <col width="80">
                    <col width="150">
                </colgroup>
                <thead>
                <tr>
                    <th><input id="checkedAll" type="checkbox" value="1" style='display: inline;margin-top: 13px;'></th>
                    <th class="hidden-xs">ID</th>
                    <th class="hidden-xs">用户名</th>
                    <th>用户头像</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="table_list">
                <tr>
                    <%--<td><input type="checkbox" name="" lay-skin="primary" data-id="1"></td>
                    <td class="hidden-xs">1</td>
                    <td class="hidden-xs">洋洋</td>
                    <td>头像</td>
                    <td class="td-status">
                        <span class="layui-btn layui-btn-normal layui-btn-mini">
                                已启用
                        </span>
                    </td>
                    <td class="hidden-xs xs">
                        <a style="text-decoration:none" onclick="member_stop(this,'10001')" href="javascript:;" title="停用">
                            <i class="layui-icon">&#xe601;</i>
                        </a>
                        <a title="删除" href="javascript:;" onclick="member_del(this,'1')"
                           style="text-decoration:none">
                            <i class="layui-icon">&#xe640;</i>
                        </a>
                    </td>--%>
                </tr>
                </tbody>
            </table>
            <!--分页-->
            <div class="layui-box layui-laypage layui-laypage-default pagination" id="layui-laypage-1">
                <%--<span class="layui-laypage-count">共 100 条</span>
                <a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">首页</a>
                <a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
                <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
                <a href="javascript:;" data-page="2">2</a>
                <span class="layui-laypage-spr">…</span>
                <a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="10">10</a>
                <a href="javascript:;" class="layui-laypage-next" data-page="2">下一页</a>
                <a href="javascript:;" class="layui-laypage-next" data-page="2">尾页</a>
                <span class="layui-laypage-limits">
                    <select lay-ignore="">
                        <option value="10" selected="">10 条/页</option>
                        <option value="20">20 条/页</option>
                        <option value="30">30 条/页</option>
                        <option value="40">40 条/页</option>
                        <option value="50">50 条/页</option>
                    </select>
                </span>--%>
            </div>
            </div>
        </div>
    </div>
</div>
<script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
<script>
    $(document).ready(function () {
        var pageNum = 1;
        var pageSize = 1;

        // 1.一进入页面发送请求，获取用户列表
       sendAjax(pageNum, pageSize);

       // 2.分页事件
        // 2.1.页码点击事件
        $(document).on("click",".pagination a",function () {

            var pageNum = $(this).prop("title");
            console.log("选择：=============== "+$("#selectPageSize").val());
            sendAjax(pageNum, $("#selectPageSize").val());
        });
        // 2.2.选择显示条数点击
        $(document).on("change","#selectPageSize",function () {
            var pageSize = $("#selectPageSize").val();
            // console.log("选择数：" + pageSize);
            sendAjax(1, pageSize);
        });

        // 3.搜索事件
        $(document).on("click","#start_seach",function () {
            // alert("..........")
            var pageSize = $("#selectPageSize").val();
           sendAjax(1, pageSize);
        });
        // 3.1.清除搜索框
        $(document).on("click","#clean_seach",function () {
            // 清空输入框和选择框
           $("#userName").val("");
           $("#states").empty();
        });


        // 4.对用户进行审核，修改审核状态
        $(document).on("click","#first_a",function () {
            console.log("启用、停用："+$(this).prop("title"));
            if($(this).prop("title") == 110){
                if(window.confirm("确定要启用吗？")){
                    var userId = $(this).parent().siblings("#userNo").attr("data-id");
                    $.ajax({
                        async:true,
                        url:"${pageContext.request.contextPath}/user/updateState",
                        type:"GET",
                        data:{state:1,
                            userId:userId},
                        dataType:"json",
                        success:function (result) {
                            console.log("修改状态，加载数据：");
                           sendAjax($(".pageNum").prop("title"), $("#selectPageSize").val());
                        },
                        error:function () {
                            alert("异步请求失败！")
                        }
                    });
                }
            }
            if($(this).prop("title") == 120){
                if(window.confirm("确定要停用吗？")){
                    var userId = $(this).parent().siblings("#userNo").attr("data-id");
                    $.ajax({
                        async:true,
                        url:"${pageContext.request.contextPath}/user/updateState",
                        type:"GET",
                        data:{state:0,
                            userId:userId},
                        dataType:"json",
                        success:function (result) {
                            sendAjax($(".pageNum").prop("title"), $("#selectPageSize").val());
                        },
                        error:function () {
                            alert("异步请求失败！")
                        }
                    });
                }
            }
        });

        // 5.删除事件
        $(document).on("click","#last_a",function () {
            if(window.confirm("确定删除吗？")){
                var userId = $(this).parent().siblings("#userNo").attr("data-id");
                sendAjax2(userId);
            }
        });
        // 5.1.批量删除事件
        $(document).on("click",".delete_all",function(){
            // 获取复选框被选中的
           if (window.confirm("确定要批量删除吗？")){
               $("input[name=checked]").each(function(){
                   if($(this).prop("checked")){
                       var userId = $(this).parent().siblings("#userNo").attr("data-id");
                       console.log("批量删除："+ $(this).parent().siblings("#userNo").attr("data-id"))
                       // 发送删除请求
                       sendAjax2(userId);
                   }
               });
           }
        });

        // 5.2.当点击单个复选框时，若点击数量==当前页的复选框数时，全选按钮被选中
        // 当点击单个复选框时，若点击数量==当前页的复选框数时，全选按钮被选中
        $(document).on("click","input[name = checked]",function(){
            // console.log("================复选框")
            var count = 0;
            $("input[name = checked]").each(function(){
                var length = $("input[name = checked]").length;
                // console.log("长度："+length);
                if($(this).prop("checked")){
                    count++;
                }
                // console.log("count  "+count)
                if(count == length){
                    console.log("========================")
                    // 复选框全选时，全选框被选中
                    $("#checkedAll").prop("checked",true);
                }else{
                    // 复选框没有被全选中。全选框取消选中
                    $("#checkedAll").prop("checked",false);
                }
            });
        });
        // 5.3.当点击全选时，选中所有框; 再次点击，取消所有框
        $(document).on("click","#checkedAll",function(){
            var checkedAll = $("#checkedAll").prop('checked');
            // console.log("全选值："+checkedAll);
            if(checkedAll == true){
                $("input[name = checked]").prop("checked",true);//全选
            }else if(checkedAll == false){
                $("input[name = checked]").prop("checked",false);//全不选
            }
        });


    });

    // 6.发送请求用户列表
    function sendAjax(pageNum, pageSize) {
        console.log("000000"+$("#states").val());
        // console.log("111" +$("#userName").val())
        $.ajax({
            async:true,
            url:"${pageContext.request.contextPath}/user/findUserInfo",
            type:"GET",
            data:{userName:$("#userName").val(),
                state:$("#states").val(),
                pageNum:pageNum,
                pageSize:pageSize},
            dataType:"json",
            success:function (result) {
                // 调用渲染数据函数
                showData(result);
            },
            error:function () {
                alert("异步请求失败！")
            }
        });
    }

    // 7.发送删除请求
    function sendAjax2(userId) {
        $.ajax({
            async:true,
            url:"${pageContext.request.contextPath}/user/deleteUserByUserNo",
            type:"GET",
            data:{userId:userId},
            dataType:"json",
            success:function (result) {
                sendAjax($(".pageNum").prop("title"), $("#selectPageSize").val());
            },
            error:function () {
                alert("异步请求失败！")
            }
        });
    }

    // 8.渲染数据(表格数据和分页信息)
    function showData(result) {
        var content = "";
        // 渲染表格信息
        $.each(result.list,function (index,User) {
            if(User.state == 1){
                content += "<tr>\n"+
                        "<td><input type=\"checkbox\" value=\"1\" name=\"checked\" style='display: inline;margin-top: 13px;'></td>"+
                    "                    <td id='userNo' class=\"hidden-xs\" data-id='"+User.userId+"'>"+User.userId+"</td>\n" +
                    "                    <td class=\"hidden-xs\">"+User.userName+"</td>\n" +
                    "                    <td><img src='${pageContext.request.contextPath}/back/static/admin/images/pig.jpg' width=\"50\" height=\"50\"></td>\n" +
                    "                    <td class=\"td-status\">\n" +
                    "                        <span class=\"layui-btn layui-btn-normal layui-btn-mini\">\n" +
                    "                                已启用\n" +
                    "                        </span>\n" +
                    "                    </td>\n" +
                    "                    <td class=\"hidden-xs xs\" title='120'>\n" +
                    "                        <a id='first_a' style=\"text-decoration:none\" href=\"javascript:;\" title=\"120\">\n" +
                    "                            <i class=\"layui-icon\">&#xe601;</i>\n" +
                    "                        </a>\n" +
                    "                        <a id='last_a' title=\"删除\" href=\"javascript:;\"\n" +
                    "                           style=\"text-decoration:none\">\n" +
                    "                            <i class=\"layui-icon\">&#xe640;</i>\n" +
                    "                        </a>\n" +
                    "                    </td>\n" +
                    "                </tr>";
            }else if (User.state == 0){
                content += "<tr>\n" +
                        "<td><input type=\"checkbox\" value=\"1\" name=\"checked\" style='display: inline;margin-top: 13px;'></td>"+
                    "                    <td id='userNo' class=\"hidden-xs\" data-id='"+User.userId+"'>"+User.userId+"</td>\n" +
                    "                    <td class=\"hidden-xs\">"+User.userName+"</td>\n" +
                    "                    <td><img src='${pageContext.request.contextPath}/back/static/admin/images/pig.jpg' width=\"50\" height=\"50\"></td>\n" +
                    "                    <td class=\"td-status\">\n" +
                    "                        <span class=\"layui-btn layui-btn-normal layui-btn-mini\">\n" +
                    "                                已停用\n" +
                    "                        </span>\n" +
                    "                    </td>\n" +
                    "                    <td class=\"hidden-xs xs\" title='110'>\n" +
                    "                        <a id='first_a' style=\"text-decoration:none\" href=\"javascript:;\" title=\"110\">" +
                    "                            <i class=\"layui-icon\">&#xe62f;</i>" +
                    "                        </a>\n" +
                    "                        <a id='last_a' title=\"删除\" href=\"javascript:;\"\n" +
                    "                           style=\"text-decoration:none\">\n" +
                    "                            <i class=\"layui-icon\">&#xe640;</i>\n" +
                    "                        </a>\n" +
                    "                    </td>\n" +
                    "                </tr>";
            }
        });

        $(".table_list").html(content);

        // 分页数据渲染
        var pageContent = "<span class=\"layui-laypage-count\">共"+" "+result.total+" "+"条</span>";

        // 首页+上一页
        if(result.pageNum == 1){
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\" title='1'>首页</a>";
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\" title='1'>上一页</a>";
        }else{
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev\" data-page=\"0\" title='1'>首页</a>";
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev\" data-page=\"0\" title='"+result.prePage+"'>上一页</a>";
        }

        // 页码
        for(var i=1;i<=result.pages;i++){
            if(result.pageNum == i){
                pageContent += "<span class=\"layui-laypage-curr pageNum\" title='"+i+"'><em class=\"layui-laypage-em\"></em><em>"+i+"</em></span>";
            }else{
                pageContent +="<a href=\"#\" class=\"layui-laypage-prev pageNum\" data-page=\"0\" title='"+i+"'>"+i+"</a>";
            }
        }

        // 下一页+尾页
        if(result.pageNum == result.pages){
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\" title='"+result.pages+"'>下一页</a>";
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\" title='"+result.pages+"'>尾页</a>"
        }else{
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev \" data-page=\"0\" title='"+result.nextPage+"'>下一页</a>";
            pageContent += "<a href=\"#\" class=\"layui-laypage-prev \" data-page=\"0\" title='"+result.pages+"'>尾页</a>";
        }

        // 选择条数
        pageContent += "<span class=\"layui-laypage-limits\">\n" +
            "                    <select id='selectPageSize' lay-ignore=\"\" style='border: none;display: inline-block;'>\n" +
            "<option value=\"1\">1 条/页</option>\n";
        if(result.pageSize == 3){
            pageContent += "<option value=\"3\" selected>3 条/页</option>";
        }else {
            pageContent += "<option value=\"3\">3 条/页</option>";
        } if(result.pageSize == 5){
            pageContent += "<option value=\"5\" selected>5 条/页</option>";
        }else {
            pageContent += "<option value=\"5\">5 条/页</option>";
        } if(result.pageSize == 10){
            pageContent += "<option value=\"10\" selected>10 条/页</option>";
        }else {
            pageContent += "<option value=\"10\">10 条/页</option>";
        } if(result.pageSize == 20){
            pageContent += "<option value=\"20\" selected>20 条/页</option>";
        }else {
            pageContent += "<option value=\"20\">20 条/页</option>";
        }

        $("#layui-laypage-1").html(pageContent);
    }

</script>
</html>